<template>
  <div class="product">
    <div class="my-header">
      <i class="back iconfont icon-left" @click="$router.go(-1)"></i>
      <strong>商品详情</strong>
      <i class="record" @click="$router.push({name:'order',query:{tab:0}})">订单</i>
    </div>
    <div id="mainLayout">
      <!-- 商品轮播图 -->
      <div class="prouct-swiper">
        <mt-swipe @change="handleChange" :stopPropagation="true" :prevent="true" class="scroll-images">
          <mt-swipe-item v-for="(item,index) in swipeImgList" :key="index">
            <img :src="item">
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <!-- 商品轮播图 -->
      <!-- 商品信息 -->
      <div class="product-title-text">
        <p class="product-name-text">{{productInfo.sellingPoints}}</p>
        <p class="product-summary-text">{{productInfo.summary}}</p>
        <div class="product-price">
          <span>&yen;</span>
          <strong>{{productInfo.sharePrice|formatMoney}}</strong>
          <span class="original-price">吊牌价：<i>&yen;{{productInfo.goodsPrice|formatMoney}}</i></span>
        </div>
        <div class="stock-detail">
          <dl>
            <dt>运费:</dt>
            <dd class="js-postage-desc">&yen;{{productInfo.freight|formatMoney}}起 </dd>
          </dl>
          <dl>
            <dt>剩余:</dt>
            <dd>{{productInfo.stockNum}}</dd>
          </dl>
          <dl>
            <dt>发货:</dt>
            <dd>{{productInfo.supplierAddress}}</dd>
          </dl>
        </div>
      </div>
      <!-- 商品详细信息 -->
      <div class="product-info">
        <h1>参数</h1>
        <table>
          <thead>
            <tr>
              <th> 货号 </th>
              <th> {{productInfo.goodsCode}} </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td> 品牌 </td>
              <td> {{productInfo.brandName}} </td>
            </tr>
            <tr>
              <td>
                款式
              </td>
              <td> {{productInfo.goodsTypeName}} </td>
            </tr>
            <tr>
              <td> 标准零售价 </td>
              <td> {{productInfo.goodsPrice|formatMoney}} </td>
            </tr>
            <!--<tr>
              <td> 上市时间 </td>
              <td> {{productInfo.goodsYear===0?'往季':productInfo.goodsYear}} </td>
            </tr>-->
            <tr>
              <td> 试穿季节 </td>
              <td> {{productInfo.goodsSeason|goodsSeason}} </td>
            </tr>
            <tr>
              <td> 试穿性别 </td>
              <td> {{productInfo.goodsSex|goodsSex}} </td>
            </tr>
          </tbody>
        </table>
        <div class="tips" v-if="showTips">
          <p>温馨提示：</p>
          <p>童鞋专场鞋盒破损，介意者慎拍。</p>
        </div>
        <div class="img-list">
          <div v-for="(item,index) in imgDetailList" :key="index">
            <img v-lazy="item">
          </div>
          <!--<img v-if="imgDetailList" :src="bottomImg" alt="">-->
        </div>
      </div>
      <!-- 商品详细信息 -->
    </div>
    <!-- 底部导航栏 -->
    <div class="cart-concern-fixed">
      <div class="left">
        <i class="iconfont icon-cart" @click="$router.push('/cart')"><mt-badge size="small" color="#f23030">{{cartNum}}</mt-badge></i>
      </div>
      <div v-if="stockNum==0" class="right none">抢光了</div>
      <div v-else class="right" @click="()=>skuVisible=true">加入购物车</div>
    </div>
    <!-- 底部导航栏 -->
    <mt-popup v-model="skuVisible" position="bottom" class="sku-layout">
      <div class="sku-warp">
        <div class="sku-layout-title name-card sku-name-card">
          <div class="thumb">
            <img class="js-goods-thumb goods-thumb" ref="activityImg" :src="thumbImg" alt="">
          </div>
          <div class="detail goods-base-info clearfix">
            <p class="title c-black ellipsis">{{productInfo.sellingPoints}}</p>
            <div class="goods-price clearfix">
              <div class="current-price pull-left c-black">
                <span class="price-name pull-left font-size-14 c-orange">&yen;</span><i class="js-goods-price price font-size-16 vertical-middle c-orange">{{productInfo.sharePrice|formatMoney}}</i>
              </div>
              <div class="original-price vertical-middle font-size-14 line-through">108</div>
            </div>
          </div>
          <div class="js-cancel sku-cancel" @click="()=>skuVisible=false">
            <i class="iconfont icon-close"></i>
          </div>
        </div>
        <div class="adv-opts layout-content" style="max-height: 554px;">
          <div class="goods-models js-sku-views block block-list border-top-0">
            <dl class="clearfix block-item sku-list-container">
              <dt class="model-title sku-sel-title">
                <label>选择尺码：</label>
              </dt>
              <dd>
                <ul class="model-list sku-sel-list">
                  <li class="tag sku-tag pull-left" :class="{ 'active':  activeIndex === index }" @click="addClass(index)" v-for="(item,index) in specInfo"
                    :key="index">
                    {{item.sizeName}} <span v-show="item.sizeAlias">({{item.sizeAlias}})</span>
                  </li>
                </ul>
              </dd>
             <div v-if="params.activityId=='33ded437c25944ffa03e0f624e46ad29'" style="color:#f23030">提示:JX为公司内部识别码，选码时可忽略。</div> 
            </dl>
            <dl class="clearfix block-item">
              <dt class="sku-num pull-left">
                <label>购买数量：</label>
              </dt>
              <dd class="sku-quantity-contaienr">
                <dl class="clearfix">
                  <div class="quantity">
                    <button class="minus" type="button" :class="{disabled:skuNum===1}"></button>
                    <input type="text" class="txt" v-numberOnly v-model="skuNum" @change="changeSkuNum({counter:skuNum})">
                    <button class="plus" type="button" :class="{disabled:skuNum===stockNum}"></button>
                    <div class="response-area response-area-minus" @click="changeSkuNum({increment:-1})"></div>
                    <div class="response-area response-area-plus" @click="changeSkuNum({increment:1})"></div>
                  </div>
                </dl>
              </dd>
              <dt class="other-info">
                <div class="stock">剩余{{stockNum}}件
                </div>
              </dt>
            </dl>
          </div>
          <!-- <div class="bottom-padding"></div> -->
          <div class="confirm-action content-foot clearfix">
            <!-- 加入购物车 -->
            <div class="big-btn-1-1">
              <a href="javascript:;" class="js-confirm-it big-btn orange-btn main-btn" @click="handleSubmit">加入购物车</a>
            </div>
          </div>
        </div>
      </div>
    </mt-popup>
    <!-- 返回顶部 -->
    <BackHead/>
    <ServiceIcon/>
    <!-- 返回顶部 -->
  </div>
</template>
<script>
  import {
    Swipe,
    Toast,
    SwipeItem,
    Popup,
    MessageBox
  } from 'mint-ui'
  import {
    getGoodsDetails,
    addShopCart,
    getSpecInfo
  } from '@/api/shop'
  import {
    setLocalStorage,
    // encryptString,
    decryptString,
    // getLocalStorage,
    setScrollTop
  } from '@/utils'
  import wxShare from '@/mixins/wechat'
  import {
    mapGetters
    // mapMutations
  } from 'vuex'
  import ServiceIcon from '@/components/common/serviceIcon'
  import BackHead from '@/components/common/backHead'
  export default {
    mixins: [wxShare],
    components: {
      Swipe,
      SwipeItem,
      Popup,
      BackHead,
      ServiceIcon
    },
    data() {
      return {
        bottomImg: 'http://img.sportjx.com/img/pinpaishouquan.jpg?' + Math.random(),
        skuVisible: false,
        ProductNo: '',
        productInfo: {
          sharePrice: 0,
          goodsPrice: 0,
          freight: 0
        },
        specInfo: {},
        params: {
          activityId: '',
          goodsId: '',
          bid: ''
        },
        status: 3, // 状态：1 采购 2 分销 3 分享
        activeIndex: null,
        swipeIndex: {
          nowIndex: 1
        },
        skuNum: 1,
        thumbImg: '',
        activityImg: '',
        swipeImgList: [],
        imgDetailList: [],
        showTips: false
      }
    },

    watch: {
      // 监听showSku，弹出层出现后，禁止内容层滚动
      showSku(val, oldVal) {
        document.body.style.overflow = val ? 'hidden' : 'auto'
        document.querySelector('html').style.overflow = val ? 'hidden' : 'auto'
        document.body.style.height = val ? '100%' : 'auto'
        document.querySelector('html').style.height = val ? '100%' : 'auto'
      },
      skuNum(val) {
        if (val === '') {
          return 1
        }
      }
    },
    computed: {
      ...mapGetters([
        'userInfo',
        'cartNum'
      ]),
      // 尺码库存
      stockNum(el) {
        if (this.activeIndex !== null) {
          if (this.specInfo[this.activeIndex].stockNum < this.skuNum) {
            this.skuNum = this.specInfo[this.activeIndex].stockNum
          }
          return this.specInfo[this.activeIndex].stockNum
        } else {
          return this.productInfo.stockNum
        }
      }
    },
    methods: {
      addClass(index) {
        this.activeIndex = index
      },
      handleChange(index) {
        this.swipeIndex.nowIndex = index + 1
      },
      // ...mapMutations([
      //   'SET_BOSSINFO_DATA'
      // ]),
      changeSkuNum({
        increment,
        counter
      }) {
        if (counter !== undefined) {
          if (parseInt(counter) <= 0 || isNaN(parseInt(counter))) {
            this.skuNum = 1
          } else if (parseInt(counter) > this.stockNum) {
            this.skuNum = this.stockNum
          } else {
            this.skuNum = parseInt(counter)
          }
        } else {
          if ((increment < 0 && this.skuNum === 1) || (increment > 0 && this.skuNum === this.stockNum)) {
            return false
          }
          this.skuNum += increment
        }
      },
      handleSubmit() {
        // 加入购物车,提交订单
        if (this.activeIndex == null) {
          return Toast({
            message: '请选择尺码'
          })
        }

        const params = {
          //   userId: 'a2d4c13d40264dbfbb16f14727d06cab',
          userId: this.userInfo.id,
          activityId: this.params.activityId,
          goodsDetailsId: this.productInfo.goodsDetailsId,
          sizeId: this.specInfo[this.activeIndex].sizeId,
          cartNum: this.skuNum,
          uId: this.productInfo.uId,
          status: this.status,
          bId: this.params.bid
        }
        // 加入购物车
        addShopCart(params)
          .then(res => {
            this.skuVisible = false
            // 添加购物车数量
            const num = this.cartNum + this.skuNum
            this.$store.dispatch('addCartNum', num)
            MessageBox({
              title: '成功加入购物车',
              cancelButtonText: '继续添加',
              confirmButtonText: '前往结算',
              message: '<div style="text-align:center">当前购物车共' + num + '件商品</div>',
              showCancelButton: true
            }).then(action => {
              if (action === 'confirm') {
                this.$router.push('/cart')
              }
            }).catch(() => {})
          }).catch(err => {
            Toast({
              message: err.info
            })
          })
      },
      // 设置分享信息
      setShare() {
        const shareInfo = {
          title: `[分享]` + this.productInfo.sellingPoints,
          desc: this.productInfo.sellingPoints,
          link: window.location.href,
          img: this.activityImg
        }
        // mixins
        this.wechatShare(shareInfo)
      },
      initData() {
        // const goodsId = this.$route.query.goodsId
        //  "e98e25e71e084b829e64bddfa3af8f58"
        // if (goodsId) {
        //   this.params.goodsId = goodsId
        //   this.params.activityId = getLocalStorage('activityId')
        //   this.params.bid = getLocalStorage('sharebid')
        // } else {
        //   this.ProductNo = this.$route.query.id
        //   // 替换所有的'-'
        //   const decryptStr = this.ProductNo.replace(/\-/g, '+')
        //   // 解密
        //   const parseStr = decryptString(decryptStr)
        //   this.params = JSON.parse(decodeURIComponent(parseStr))
        //   // 保存bid
        //   // 保存分享人的id
        //   setLocalStorage('activityId', this.params.activityId)
        //   setLocalStorage('sharebid', this.params.bid)
        // }
        this.ProductNo = this.$route.query.id
        // 替换所有的'-'
        const decryptStr = this.ProductNo.replace(/\-/g, '+')
        // 解密
        const parseStr = decryptString(decryptStr)
        this.params = JSON.parse(decodeURIComponent(parseStr))
        // if (this.params.activityId !== '7854d9568f7d4f34b92ed425eb45d315') {
        //   this.showTips = true
        // }
        // 保存bid
        // 保存分享人的id
        setLocalStorage('activityId', this.params.activityId)
        setLocalStorage('sharebid', this.params.bid)
        // 获取商品详情
        getGoodsDetails({
          activityId: this.params.activityId,
          goodsId: this.params.goodsId
        }).then(res => {
          // 商品信息
          this.productInfo = res.data.findGoodsDetails
          // 轮播图
          this.productInfo.imgsList.map((el, index) => {
            if (el.goodsImg.toLowerCase() !== '998.jpg') {
              if (el.goodsImg.substring(2, 0) !== '60' && el.goodsImg.toLowerCase() !== '999.jpg') {
                this.swipeImgList.push(el.goodsPath + el.goodsImg)
                if (el.goodsImg.toLowerCase() === '5.jpg') {
                  this.thumbImg = el.goodsPath + el.goodsImg
                }
              } else {
                this.imgDetailList.push(el.goodsPath + el.goodsImg)
              }
            }
          })
          // 活动是否显示鞋盒破损
  
          const arr = ['aedb056b098a478da3ea844acf8952cb', '8569f6b51c0b4044afa224dd6c15b8bd']
          if (arr.includes(this.params.activityId)) {
            this.showTips = true
          }
          this.imgDetailList = this.imgDetailList.reverse()
          // 正品保证图
          this.imgDetailList.push(this.bottomImg)

          this.swipeImgList = this.swipeImgList.reverse()
          // 缩略图
          this.thumbImg === '' ? this.imgList[0] : this.thumbImg
          // 微信分享图片
          this.activityImg = this.productInfo.activityImg.split(',')[0]
          this.setShare()
          // 尺码信息
          getSpecInfo({
            goodsDetailsId: this.productInfo.goodsDetailsId
          }).then(res => {
            this.specInfo = res.data.goodsSpecList
          })
        })
        const formData = {
          // userId: 'a2d4c13d40264dbfbb16f14727d06cab',
          userId: this.userInfo.id,
          status: this.status,
          activityId: this.params.activityId,
          bId: this.params.bid
        }
        this.$store.dispatch('getCartNum', formData)
      }
    },
    created() {
      this.initData()
      // 置顶
      setScrollTop(0)
    },
    filters: {
      // 商品季节：1春季2夏季3秋季4冬季
      goodsSeason(value) {
        switch (value) {
          case 1:
            return '春季'
          case 2:
            return '夏季'
          case 3:
            return '秋季'
          case 4:
            return '冬季'
        }
      },
      // 商品性别：1男 2女 3中性
      goodsSex(value) {
        switch (value) {
          case 1:
            return '男'
          case 2:
            return '女'
          case 3:
            return '中性'
        }
      }
    }
  }

</script>
<!-- product -->
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  @import '~assets/common/css/good_sku.scss';
  /* 商品 */

  #mainLayout {
    padding-top: 1.25rem;
    margin-bottom: 1.25rem;
    .prouct-swiper {
      box-shadow: 0px 0px 6px 1px #eee;
      position: relative;
      .scroll-images {
        text-align: center;
        background: #ffffff;
        height: 10rem;
        img {
          max-width: 100%;
          margin: 0 auto;
          vertical-align: middle;
          max-height: 10rem; // min-height: 10rem;
        }
      }
    }
    .product-title-text {
      @include flexbox(space-between,
      flex-start,
      column,
      wrap);
      padding: $padding;
      background: #fff;
      .product-name-text {
        font-size: $title;
        color: #232326;
        @include textoverflow(2);
      }
      .product-price {
        color: $red;
        text-align: left;
        width: 100%;
        span {
          font-size: 14px;
          margin-right: 3px;
        }
        strong {
          font-size: 20px;
        }
        .original-price {
          color: #999;
          font-size: 12px;
          margin-left: 5px;
          i {
            text-decoration: line-through;
          }
        }
      }
      .stock-detail {
        width: 100%;
        line-height: 12px;
        font-size: 0;
        color: #999;
        background-color: #fff;
        dl {
          width: 33%;
          margin-top: 10px;
          margin-bottom: 10px;
          display: inline-block;
          font-size: 12px;
          zoom: 1;
          &:after {
            content: '';
            display: table;
            clear: both;
          }
          dt {
            display: inline-block;
          }
          dd {
            display: inline-block;
            word-wrap: break-word;
          }
        }
      }
    }
    .product-info {
      margin-top: $margin;
      background: #fff;
      h1 {
        padding: $padding;
        color: #333333;
        font-weight: 600;
        font-size: 16px;
      }
      table {
        border-collapse: collapse;
        width: 100%;
        color: #232323;
        th {
          border-top: 1px solid #e4e4e4;
          border-bottom: 1px solid #e4e4e4;
          padding: 10px;
          text-align: left;
          font-weight: normal;
          &:first-child {
            color: #b5b5b5;
          }
        }
        td {
          border-left: 1px solid #e4e4e4;
          border-bottom: 1px solid #e4e4e4;
          padding: 10px;
          &:first-child {
            background: #f9f9f9;
            color: #b5b5b5;
            border-left: 0px;
          }
        }
      }
      .tips {
        color: red;
        font-size: 13px;
        text-align: left;
        padding: 10px;
        p {
          line-height: 18px;
        }
      }
      .img-list {
        padding: $padding;
        img {
          width: 100%;
          height: auto
        }
      }
    }
  }
  /* 商品 */
  /* 底部导航栏 */

  .cart-concern-fixed {
    position: fixed;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 100%;
    height: 1.25rem;
    background: #fff;
    border-top: 1px solid $border;
    @include flexbox(space-between,
    center,
    row,
    nowrap);
    .left {
      width: 40%;
      height: 100%;
      @include flexbox(center,
      center,
      row,
      nowrap);
      .icon-cart {
        position: relative;
        display: block;
        font-size: 26px;
        .mint-badge {
          position: absolute;
          left: 15px;
          top: 0;
        }
      }
    }
    .right {
      width: 60%;
      height: 100%;
      background: $red;
      color: #fff;
      font-size: $title;
      @include flexbox(center,
      center,
      row,
      nowrap);
      flex: initial;
      &.none {
        background: #ddd;
      }
    }
  }
  /* 底部导航栏 */

  .sku-layout {
    width: 100%;
    background: white;
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
  }

</style>
<style lang="scss">
  #prodContent-container {
    width: 100%;
    clear: both;
    overflow: hidden;
  }

  #prodContent-container * {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

</style>
